import { defineStore } from "pinia";
import {ref,watch} from "vue"
function initState(){
  return {
    isCollapse: false,
    tags: [
        {
          path:'/home',
          name:'home',
          label:'首页',
          icon:'home'
        }
    ],
    currentMenu: null,
    menuList: [],
    token: null,
    routerList: []
  }
}



export const useAllDataStore = defineStore('allData', () => {
  const state = ref(initState())
  function selectMenu(value) {
    if (value.name==='home') {
      state.value.currentMenu = null
    }else {
      state.value.currentMenu = value
      let index=state.value.tags.findIndex(item=>item.name===value.name)
      index===-1?state.value.tags.push(value):""
    }
  }
  function undateMenu(tag){
    let index=state.value.tags.findIndex(item=>item.name===tag.name)
    state.value.tags.splice(index,1)
  }

  function updateMenuList(data){
    state.value.menuList=data
  }

//使用watch监听state
watch(state, (newObj)=>{
//如果变化后的state中的token不存在，代表用户退出(一般退出后会清除token)，不需要持久化存储state了
if(!newObj.token) return
//持久化存储state
localStorage.setItem('store',JSON.stringify(newObj))
},{ deep: true })//deep开启深度监听

//动态路由
//需要传递router对象进来
  function addMenu(router,type){

            //如果是刷新的时候执行的，则从持久化中读取数据赋值给state
        if(type==="refresh"){
            //这个判断是看持久化数据是否存在，因为这个addMenu我们需要放到main.js中执行，第一次加载项目的时候，会执行但是因为没有持久化数据，所以不是刷新，直接return出去
          if(JSON.parse(localStorage.getItem('store'))){
              //读取持久化数据，赋值给state
            state.value=JSON.parse(localStorage.getItem('store'))
              //routerList保存的函数，存储的时候不能解析，其中的值就是null，这里重新赋值[]
            state.value.routerList=[]
          }else{
            return
          }
        }
        
        const menu=state.value.menuList
        //这里**代表0或多个文件夹，*代表文件。就是把views下的文件全部导入
        const module =import.meta.glob('../views/**/*.vue')
        //这个是菜单格式化后的路由数组
        const routeArr=[]
        //格式化菜单路由
        menu.forEach(item => {
                //如果菜单有children
            if(item.children){
                    //把children遍历格式化
                item.children.forEach(val => {
                    let url=`../views/${val.url}.vue`
                            //这里通过url取出对应的组件
                    val.component=module[url]
                })
            //需要注意的是我们只需要为item.children中的菜单添加路由，所以我们把它解构出来
                routeArr.push(...item.children)
            }else{
              let url=`../views/${item.url}.vue`
              item.component=module[url]
              routeArr.push(item)
            }
        })
        state.value.routerList=[]
        let routers=router.getRoutes()
        routers.forEach(item=>{
          if(item.name=='main'||item.name=='login'||item.name=='404'){
            return
          }else{
            router.removeRoute(item.name)
          }
        })
        //遍历routeArr
        routeArr.forEach(item=>{
          state.value.routerList.push(router.addRoute("main",item)) 
        })
        
  }

  function clean(){
    state.value.routerList.forEach(item=>{
      if(item) return item()
    })
    state.value=initState()

    localStorage.removeItem('store')

  }

  return { 
    state,
    selectMenu,
    undateMenu,
    updateMenuList,
    addMenu,
    clean,
   }
})